<div id="secondaryHeader">
    <div id="secondary-header-container">
        {# form is wrapping search buttons and the search bar inputs #}
        {% set enabled_scopes_class = 'scopes-' + 
            '%s'|format(settings.ALL_SCOPE_ENABLED) + '-' +
            '%s'|format(settings.UNANSWERED_SCOPE_ENABLED) + '-' +
            '%s'|format((request.user.is_authenticated() and settings.FOLLOWED_SCOPE_ENABLED))
        %}
        <form
            {% if active_tab == "tags" %}
                action="{% url tags %}" 
            {% elif page_class == 'user-profile-page' %}
                action="{% url questions %}" id="searchForm"
            {% elif active_tab == "users" %}
                action="" 
            {% else %}
                action="{% url questions %}" id="searchForm"
            {% endif %}
            class="{{ enabled_scopes_class }}"
            method="get">
            {# 
                A single row table to help the semi-fixed width layout where:
                * all cells have "tight width" without linebreaks
                * except that the search bar cell takes the remaining width
                We had hard time making this layout work without tables.
                Please suggest if there is a better way.
            #}                   
            <div id="search-bar-container">
                {% include "widgets/search_bar.html" %}
            </div>
            {% if settings.ASK_BUTTON_ENABLED %}
                <div id="ask-btn-container">
                    {% include "widgets/ask_button.html" %}   
                </div>    
            {% endif %}
        </form>
    </div>
</div>
